<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>

    username: <input type="text" id="username"> <span style="color: red;" id="error"></span> <br>
    password: <input type="text" id="password"> <br>

    <input type="button" value="登录-get" id="loginBtn"> <br>
    <input type="button" value="登录-post" id="loginBtn2"> <br>
    <input type="button" value="登录-ajax" id="loginBtn3"> <br>

</body>

<script>
    <!--给登录按钮绑定单击事件-->
    $("#loginBtn").click(function (){
        //获取用户输入的username & password
        let username = $("#username").val();
        let password = $("#password").val();


        //发送异步请求，将username & password传递到后端服务器
        let url = "/ajax/loginServlet";
        // let params = "username="+username+"&password="+password
        let params = {"username":username,"password":password}
        $.get(url,params,function (data){
            //data就是后端服务器返回回来的数据
            if (data === "true"){
                //进入首页
                location.href = "index.html"
            }else{
                //提示用户
                $("#error").html("用户名或密码错误");
            }
        },"text")
    });

    $("#loginBtn2").click(function (){
        //获取用户输入的username & password
        let username = $("#username").val();
        let password = $("#password").val();


        //发送异步请求，将username & password传递到后端服务器
        let url = "/ajax/loginServlet";
        // let params = "username="+username+"&password="+password
        let params = {"username":username,"password":password}
        $.post(url,params,function (data){
            //data就是后端服务器返回回来的数据
            if (data === "true"){
                //进入首页
                location.href = "index.html"
            }else{
                //提示用户
                $("#error").html("用户名或密码错误");
            }
        },"text")
    });

    $("#loginBtn3").click(function (){
        //获取用户输入的username & password
        let username = $("#username").val();
        let password = $("#password").val();


        //发送异步请求，将username & password传递到后端服务器
        let url = "/ajax/loginServlet";
        // let params = "username="+username+"&password="+password
        let params = {"username":username,"password":password}

        $.ajax({
            url: url,
            type: "post",
            data: params,
            success: function (data){
                //data就是后端服务器返回回来的数据
                if (data === "true"){
                    //进入首页
                    location.href = "index.html"
                }else{
                    //提示用户
                    $("#error").html("用户名或密码错误");
                }
            },
            dataType: "text"
        })
    });



</script>

</html>